@use'./global.scss';
@use 'sass:math';
@use 'sass:map';

//elementPlus覆盖样式
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
    //参考文件 https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
 
    $colors:(

        'white': #ffffff,
        'black': #000000,
        'primary': (
          'base': #409eff,
        ),
        'success': (
          'base': #67c23a,
        ),
        'warning': (
          'base': #e6a23c,
        ),
        'danger': (
          'base': #f56c6c,//表单错误信息
        ),
        'error': (
          'base': #f56c6c,
        ),
        'info': (
          'base': global.$color-black-60,//ElMessage提示框
        ),
    ),
      
    $text-color:(
         
        'primary': global.$color-black-80,//el-tabs未选中项
        'regular': global.$color-black-80,//输入框文字
        'secondary': global.$color-black-60,
        'placeholder': global.$color-black-50,//输入框placeholder
        'disabled': global.$color-black-45,//输入框失去焦点鼠标经过边框变色
          
    ),
    $border-color: (
        '': global.$color-black-40,//输入框边框
        'light': global.$color-black-30,//el-dropdown边框
        'lighter': global.$color-black-30,//el-dropdown分隔线
        'extra-light': #f2f6fc,//回到顶部鼠标经过背景
        'dark': #d4d7de,
        'darker': #cdd0d6,
    ),

    $fill-color: (
        '': global.$color-black-20,//骨架屏颜色
        'light': global.$color-black-10,//输入框disabled背景
        'lighter': global.$color-black-20,//表格隔行变色
        'extra-light': #fafcff,
        'dark': #ebedf0,
        'darker': #e6e8eb,
        'blank': #ffffff,//输入框背景
    ),
    $bg-color:(
        '': #ffffff,
        'page': #f2f3f5,
        'overlay': #ffffff,
    ),



    $input:(
      'bg-color': global.$color-black-10,//背景
      'border-color': global.$color-black-10,//边框颜色
      'hover-border-color': global.$color-black-30,//鼠标经过边框颜色
    ),
 
    $select: (
      'border-color-hover': global.$color-black-30,//鼠标经过边框颜色
    )
);


//表单项下边距
.el-form-item--large {
    margin-bottom: 22px;
}
//表单错误信息
.el-form-item--large .el-form-item__error {
    padding-top: 8px;
    line-height: 20px;
    position: relative;
    top: 0;
    margin-bottom: -10px;
    font-size: 13px;
    width: 100%;
}
//表单错误边框
.el-form-item.is-error .el-input__wrapper {
    box-shadow: 0 0 0 1px transparent inset;
    background: #fcf2f3;
}
.el-form-item.is-error .el-textarea__inner{
    box-shadow: 0 0 0 1px transparent inset;
    background: #fcf2f3;
}
.el-form-item--large .el-form-item__content {
    line-height: normal;
}
//.el-input__inner::placeholder {
//    position: relative;
//    top: 1px;
//}

//.el-button--primary{
//   padding: 10px 15px 10px 15px;
//}

//文本表单
.textForm-container{
    margin-top: 15px;
    

    :deep(.el-input__wrapper) {
        padding: 1px 15px 1px 0px;
        
        background: global.$color-black-23;
        padding-left: 7px;
        padding-right: 7px;
        margin-left: -7px;
        margin-right: -7px;
        box-shadow: 0 0 0 1px global.$color-black-23 inset;
    }
    :deep(.el-input__wrapper:hover) {
        box-shadow: 0 0 0 1px global.$color-black-30 inset;
    }
    :deep(.el-input__wrapper.is-focus) {
        box-shadow: 0 0 0 1px global.$color-blue-60 inset;
    }

    :deep(.el-select .el-select__tags .el-tag--info) {
        background-color: global.$color-black-35;
    }

    :deep(.el-textarea__inner){
        background-color: global.$color-black-23;
    }
   // :deep(.el-input__wrapper.is-focus) {
    //    box-shadow: 0px -1px 0px 0px transparent,//上边阴影
   //          -1px 0px 0px 0px transparent,//左边阴影
   //          1px 0px 0px 0px transparent,//右边阴影
    //         0px 1px 0px 0px $color-blue-60;//下边阴影
   // }
   // :deep(.el-input__inner) {
   //     height: 34px;
   //     line-height: 34px;
   // }
    //表单错误边框
    :deep(.el-form-item.is-error .el-input__wrapper)  {
        box-shadow: 0 0 0 1px global.$color-black-10 inset;
        background: #fcf2f3;
        padding-left: 7px;
        padding-right: 7px;
        margin-left: -7px;
        margin-right: -7px;
    }

    

    .view-field{
        background: global.$color-black-10;
       
        width: 100%;
        padding: 10px;
        .input-name{
            font-size: 13px;
            margin-left: 5px;
            margin-right: 5px;
            color: global.$color-black-50;
        }
        .isRequired:before {
            content: "*";
            color: #F56C6C;
            margin-right: 4px;
            position: relative;
            top: 3px;
        }
        .textInput-content{
            margin-top: 8px;
            line-height: 26px;
            margin-left: 5px;
            margin-right: 5px;
        }
        .formInput-content{
            margin-top: 10px;
            margin-bottom: 2px;
            margin-left: 5px;
            margin-right: 5px;
        }
        .help{
            margin-top: 8px;
            line-height: 26px;
            color: global.$color-black-50;
            .help-icon{
                position: relative;
                top: 4px;
                margin-right: 5px;
            }
            .help-text{
                font-size: 13px;
            }
        }
    }
    .smsCode-item{
        :deep(.el-input__wrapper) {
            padding: 1px 15px 1px 15px;
            padding-left: 15px;
            padding-right: 15px;
            margin-left: 0px;
            margin-right: 0px;
            background: global.$color-black-10;
            box-shadow: 0 0 0 1px global.$color-black-10 inset;
        }
        :deep(.el-input__wrapper:hover) {
            box-shadow: 0 0 0 1px global.$color-black-30 inset;
        }
        :deep(.el-input__wrapper.is-focus) {
            box-shadow: 0 0 0 1px global.$color-blue-60 inset;
        }
        .isRequired:before {
            content: "*";
            color: #F56C6C;
            margin-right: 4px;
            position: relative;
            top: 3px;
        }
        .smsCode{
            width: 170px;
            text-align: right;
            .button{
                color: global.$color-blue-60;
                margin-right: 16px;
                &:hover{
                    color: global.$color-blue-50;
                }
            }
            .countdown{
                color: global.$color-blue-60;
            }
            
        }
    }
    :deep(.is-error.smsCode-item){
        .el-input__wrapper {
            box-shadow: 0 0 0 1px #fcf2f3 inset;
            background: #fcf2f3;
            padding-left: 15px;
            padding-right: 15px;
            margin-left: 0px;
            margin-right: 0px;
        }
    }
    .successInfo{
        margin-bottom: 18px;
        font-size: 14px;
        color: green;
        line-height: 20px
    }
    
    .captcha-item{
        .captchaInput{
            width: 130px;
        }
        .replaceCaptchaText{
            position: relative;
            top: 10px;
            user-select:none;
        }
        .isRequired:before {
            content: "*";
            color: #F56C6C;
            margin-right: 4px;
            position: relative;
            top: 3px;
        }
        :deep(.el-form-item__error){
            width: 100%;
        }
        :deep(.el-input__wrapper) {
            padding: 1px 15px 1px 15px;
            padding-left: 15px;
            padding-right: 15px;
            margin-left: 0px;
            margin-right: 0px;
            background: global.$color-black-10;
            box-shadow: 0 0 0 1px global.$color-black-10 inset;
        }
        :deep(.el-input__wrapper:hover) {
            box-shadow: 0 0 0 1px global.$color-black-30 inset;
        }
        :deep(.el-input__wrapper.is-focus) {
            box-shadow: 0 0 0 1px global.$color-blue-60 inset;
        }
    }
    :deep(.is-error.captcha-item){
        .el-input__wrapper {
            box-shadow: 0 0 0 1px #fcf2f3 inset;
            background: #fcf2f3;
            padding-left: 15px;
            padding-right: 15px;
            margin-left: 0px;
            margin-right: 0px;
        }
    }


}


//表格
.dataTable{
    font-size: 15px;
    tr{
        background-color: global.$color-black-20;
    }
    
    //行边框线
    th.el-table__cell.is-leaf, td.el-table__cell {
        border-bottom: 1px solid transparent;
    }
    //底部边框线
    .el-table--border::after, 
    .el-table--border::before, 
    .el-table--border .el-table__inner-wrapper::after,
    .el-table__inner-wrapper::before {
        background-color: transparent;
    }
    //鼠标经过变色
    .el-table__body tr:hover>td.el-table__cell {
        background-color: global.$color-black-25;
    }
    //单元格
    .el-table__cell{
        padding: 12px 0 12px 0;
    }
    .cell {
        line-height: 26px;
    }
    //.el-button.is-link {
    //  padding: 1px 0px 2px 0px;
    //}

    .userInfo{
        display: flex; 
        align-items: center;
        .cancelAccount{
            display: inline-block;
            vertical-align: middle;
            padding: 6px 6px;
            font-size: 14px;
            line-height: 14px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            color: global.$color-black-50;
            background-color: global.$color-black-10;
        }
        .avatarImg{
            img {
                width: 40px;
                height: 40px;
                margin-right: 10px;
                border-radius:40px;
                vertical-align: middle;
            }
        }
        .account{
            position: relative;
            top: 1px;
        }  
    }
}

//ElLoading自定义样式--无遮罩
.loading-noOverlay-custom {
    pointer-events: none;
}


 //透明气泡
 .popper-transparent.is-dark{
    background: global.$color-black-100;
    border: 1px solid transparent;
    opacity: 0.6;
    .el-popper__arrow::before{
        border: 1px solid transparent;
        background: global.$color-black-100;
    }
 }

//Prism代码高亮
:deep(code[class*="language-"]),
:deep(pre[class*="language-"]) {
    line-height: 1.6; 
}
:deep(pre[class*="language-"]).line-numbers {
	overflow-y: hidden;/*隐藏垂直滚动条*/
}
//符号会有白色背景
:deep(.style) .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	//background: hsla(0, 0%, 100%, .5);
    background: transparent !important;
}
:deep(:not(pre)) > code[class*="language-"],
:deep(pre[class*="language-"]) {
	background: #f7f7f7 !important;
}
:deep(.line-numbers) .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: -2px !important;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
    border-right: 1px solid transparent !important;
	/**border-right: 1px solid #999;**/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    line-height: 1.6; 
    &:before{
        content: "";
        display: block;
        position:absolute;
        width: 100%;
        height: 18px;
        background: #eff2f3;
        top: -18px;
    }
    &:after{
        content: "";
        display: block;
        position:absolute;
        overflow:hidden;
        width: 100%;
        height: 18px;
        background: #eff2f3;
        bottom: -18px;
        
    }
}
:deep(.line-numbers-rows) > span{
    pointer-events: none;
	display: block;
	counter-increment: linenumber;
    &:before {
        content: counter(linenumber);
        color: #869194 !important;
        display: block;
        padding-right: 0.8em;
        text-align: right;
        height: 100% !important;
        background: #eff2f3 !important;
    }
}
//复制按钮鼠标经过颜色
:deep(div.code-toolbar){
    > .toolbar{
        > .toolbar-item{
            > a:hover,
            > button:hover,
            > button:focus,
            > span:hover,
            > span:focus{
                color:  global.$color-black-70;
            }
        }
    }

}